<template>
  <div class="module-carno-city">

    <a class="iconfont icon-close2 js-close-modal" @click="handleClose" href="javascript:;"></a>
    <ul class="car-city-list clearfix">
      <li class="item" v-for="(item,index) in cityList" :class="{active:curCity==index}" @click="handleSelectCity(item,index)"><span>{{item}}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  props:{
    title:String,
  },
  data(){
    return{
      curCity:0,
      cityList:['粤','京','津','冀','晋','蒙','辽','吉','黑','沪','苏','浙','皖','闽','赣','鲁','豫','鄂','湘','桂','琼','渝','川','贵','云','藏','陕','甘','青','宁','新','港','澳','台',]
    }

  },
  methods:{
    handleClose(){
      this.$emit('popupClose')
    },
    handleSelectCity(item,index){
      this.curCity=index;
      this.$emit('selectCity',item)
    }
  }
}
</script>
<style>
  .module-carno-city .icon-close2{
    position: absolute;
    top:6px;
    right: 10px;
    font-size: 18px;
    color: #666;

  }
  .module-carno-city .car-city-list {
    display: flex;
    flex-wrap: wrap;
    padding:32px 4px 10px;
  }
  .module-carno-city .car-city-list .item {
    width:20%;
    padding:4px;
    text-align: center;
  }
  .module-carno-city .car-city-list .item.active span {
    background:#007EE5;
    border: 1px solid #007EE5;
    color: #fff;
  }
  .module-carno-city .car-city-list span {
    display: inline-block;
    font-size: 16px;
    padding:6px;
    color: #333;
    width: 100%;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 3px;
  }
</style>
